<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../0_assets/vue2.js"></script>
</head>

<body>
    <div id="app">
        <!-- 可以看到，页面一加载，这个输入框就自动获取焦点了 -->
        <input type="text" v-focus />

        <!-- 可以看到，页面一加载，这个输入框里就自动被赋值为11111了 -->
        <input type="text" v-set-value="11111">
    </div>
    <script>
        Vue.directive('setValue', {
            // inserted属性表示被绑定的元素插入父节点的时候调用，bind/update...
            inserted(el, binding) {//能接受到两个参数，el表示被指令所绑定的元素,binding是一个对象，其中name属性代表指令名，value代表指令绑定的值也就是等于号后面的东西
                el.value = binding.value;
            }
        });

        let app = new Vue({
            el: '#app',
            // 局部自定义指令
            directives: {
                focus: {
                    // inserted属性表示被绑定的元素插入父节点的时候调用，bind/update...
                    inserted(el, binding) {//能接受到两个参数，el表示被指令所绑定的元素,binding是一个对象，其中name属性代表指令名，value代表指令绑定的值也就是等于号后面的东西
                        el.focus();
                    }
                }
            }
        });
    </script>
</body>

</html>